<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>生命周期</title>

		<script src="js/vue.js"></script>

	</head>

	<body>
		<div id="app">

			<h3 id="h3">{{msg}}</h3>
			<input type="button" @click="change" value="改变msg的值" />
			
			<input type="button" @click="destroy" value="销毁vue" />
			
			<img src="img/lifecycle.png" />

		</div>

		<script>
			var print = function(msg) {
				console.log(msg);
			}
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "data msg"
				},
				methods: {
					toast() {
						print("toast方法");
					},
					change() {
						this.msg = "改变后msg";
					},
					destroy(){
						this.$destroy()
					}
				},
				beforeCreate() {
					print("=======beforeCreate====")
					print("data.msg = " + this.msg)

				},
				created() {
					print("=======created====")
					print("data.msg = " + this.msg)
					this.toast()
				},
				beforeMount() {
					print("=======bbeforeMount====")
					print("=======创建DOM，挂载之前====")
					print(document.getElementById("h3").innerText)
				},
				mounted() {
					print("=======mmounted====")
					print("=======vue模板挂载到DOM完成,页面已经面向用户====")
					print(document.getElementById("h3").innerText)
				},
				beforeUpdate() {
					print("=======beforeUpdate====")
					print("=======数据改变后，dom渲染之前====")
					print(document.getElementById("h3").innerText)
				},
				updated() {
					print("=======updated====")
					print("=======据改变后，dom渲染之后====")
					print(document.getElementById("h3").innerText)
				},
				beforeDestroy(){
						print("=======beforeDestroy====")
						print(document.getElementById("h3").innerText)
				},
				destroyed(){
					print("=======destroyed====")
					print(document.getElementById("h3").innerText)
				}

			});
		</script>
	</body>

</html>